import { SlateEditor, SlateTransforms, SlateElement, SlateNode } from '@wangeditor/editor'
class ButtonMenu {                       // JS 语法

    constructor() {
        this.title = '右浮动' // 自定义菜单标题
        // this.iconSvg = '<svg>...</svg>' // 可选
        this.tag = 'button'
    }

    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    getValue(editor) {
        editor.addMark('float', 'right')     // 加粗
        const nodeEntries = SlateEditor.nodes(editor, {
            match: (node) => {          // JS syntax
                if (SlateElement.isElement(node)) {
                    if (node.type === 'paragraph') {
                        return true // 匹配 paragraph
                    }
                }
                return false
            },
            universal: true,
        })

        if (nodeEntries == null) {
            console.log('当前未选中的 paragraph')
        } else {
            for (let nodeEntry of nodeEntries) {
                const [node, path] = nodeEntry
                console.log('选中了 paragraph 节点', node.children[1]);
                const elem = editor.toDOMNode(node.children[1]); // 返回 HTMLElement
                console.log("图片对应的dom节点", elem);
                console.log('节点 path 是', path)
                SlateTransforms.setNodes(editor, {
                    // @ts-ignore
                    width: '100%'
                }, {
                    mode: 'highest' // 针对最高层级的节点
                })
            }
        }
    }

    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    isActive(editor) {                    // JS 语法
        return false
    }

    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    isDisabled(editor) {                     // JS 语法
        return false
    }

    // 点击菜单时触发的函数
    exec(editor, value) {                              // JS 语法
        if (this.isDisabled(editor)) return
        editor.insertText(value) // value 即 this.value(editor) 的返回值
    }

}
const ImageFloatHover = {
    key: 'ImageFloatHover',
    factory() {
        return new ButtonMenu();
    },
}
export default ImageFloatHover;